{include file="public/header" /}
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form id="allotRuleForm" class="layui-form layui-form-pane" autocomplete="off">
                        <input type="hidden" name="id" value="{$account_info.id}">
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" value="{$account_info.name}" disabled class="layui-input layui-disabled">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">当前账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="account" value="{$account_info.account}" disabled class="layui-input layui-disabled">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">账号权限</label>
                            <div class="layui-input-block">
                                &nbsp;&nbsp;
                                <button id="checkAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">全选</button>
                                <button id="cancelCheckAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">全不选</button>
                                <button id="expandAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">展开全部</button>
                                <button id="unExpandAll" type="button" class="layui-btn layui-btn-sm layui-btn-normal">收起全部</button>
                                <div id="ruleArea" lay-filter="eleTree" class="eleTree ele1"></div>
                            </div>
                            <input type="hidden" name="checked_list" id="checkedList">
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button lay-submit lay-filter="sendForm" class="layui-btn layui-btn-normal">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var nodeIds = [];
    var checkNode = [];
    var notCheckNode = [];
    layui.config({
        base: '../../public/static/js/'
    }).use(['form','eleTree'],function () {
        var $ = layui.jquery,
            form = layui.form,
            eleTree = layui.eleTree;

        var tree = eleTree.render({
            elem:'#ruleArea',
            method:'post',
            url:"{:url('rule/treeList')}",
            request:{
                name:'name',
                children:'_child',
            },
            response:{
                statusCode:'suc',
            },
            showCheckbox: true,//节点是否可被选择 默认 false
            showLine:true,//是否显示连线 默认false
            // defaultCheckedKeys:[22,56],//默认勾选的节点
            // accordion:false,//每次是否只展开一个节点 默认false
            defaultExpandAll:true,//是否默认展开所有节点 默认false
            indent:100,//相邻级节点间的水平缩进，单位为像素
            checkStrictly:true,//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
            done:function (res) {
                //数据请求完成的回调函数，只有异步请求才会有
                nodeIds = res.ids;
                $.ajax({
                    type:"POST",
                    data:{id:'{$info.id}'},
                    url:"{:url('user/userNodeList')}",
                    dataType: 'JSON',
                    success:function (data) {
                        tree.setChecked(data.data,true)
                    }
                })
            }
        });

        //全选
        $("#checkAll").click(function () {
            tree.setChecked(nodeIds);
            checkNode = nodeIds
        });
        //全不选
        $("#cancelCheckAll").click(function () {
            tree.unCheckNodes();
            checkNode = [];
        });
        //全部展开
        $("#expandAll").click(function () {
            tree.expandAll();
        });
        //全部收起
        $("#unExpandAll").click(function () {
            tree.unExpandAll();
        });

        //监听选中
        eleTree.on("nodeChecked(eleTree)",function (d) {
            let currentData = d.data.currentData
            if (d.isChecked == true){
                checkNode.push(currentData)
                // console.log(checkNode)
            } else {
                notCheckNode.push(currentData)
                // console.log(notCheckNode)
            }
        });

        form.on('submit(sendForm)',function (data) {
            let check = tree.getChecked(false,true)

            let checkList = [];
            for (var i=0;i<check.length;i++){
                checkList.push(check[i].id)
            }

            $("#checkedList").val(JSON.stringify(checkList))

            $.ajax({
                type:"POST",
                url:"{:url('user/allotRule')}",
                data:$("#formData").serialize(),
                dataType:"JSON",
                success:function (res) {
                    if (res.code == 'suc'){
                        sucMsg(res.msg,function () {
                            parent.layui.table.reload('userList')
                            xadmin.close()
                        })
                    }else {
                        errMsg(res.msg)
                    }
                }
            })
            return false;
        })
    });
</script>
</body>
</html>